import React from "react";
import { NavBar, Icon ,Flex} from 'antd-mobile-v2';
import withHook from "../../utils/Withhook"
import Searchnavbar from "../../components/Searchnavbar/index2";
import styles from "./index.module.css"
import Filter from "./components/FilterMain";
import { API } from "../../utils/api";
import { BASE_URL } from "../../utils/url";
import {List,AutoSizer,WindowScroller,InfiniteLoader} from 'react-virtualized';
import HouseItem from "../../components/houseList";
import Sticky from "../../components/Sticky";//吸顶效果组件导入
import { Toast } from 'antd-mobile-v2'
const { value } = JSON.parse(localStorage.getItem('hkzf_city'))

class CityList extends React.Component{
    state={
        list:[],//城市列表数据信息
        count:0,//列表数据数
    }

    filters = {}//筛选数据存放处

    //（子传父）函数：从filertmain里面获取收集的筛选数据（子传父）
    getfilervalues=(filters)=>{
        this.filters = filters
        this.gethousedata()
        window.scrollTo(0,0)//每次筛选，获得数据，完回到顶部
    }

    //api：数据请求函数：获取筛选后得房屋信息数据(这里只获取前20行)
    async gethousedata(){
        const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))//每次更新更新数据都获得一次城市信息
        this.label=label
        this.value=value
        Toast.loading("正在为您找小窝~",0,null,false)
        const res=await API.get("/houses",{params:{cityId:value,...this.filters,start:1,end:20}})
        const {list,count}=res.data.body
        this.setState(
            {
                list,
                count
            }
        )
        Toast.hide()
        if(count!=0){
            Toast.info(`共有${count}套房子`,2,null,false)

        }
    }
    //生命周期开始
    componentDidMount(){       
        this.gethousedata()
    }

    //渲染函数：返回值就是渲染页面的内容每一行
    renderhouselist=({
        key, 
        index, 
        style, 
    }) =>{
            // 根据索引号来获取当前这一行的房屋数据
        const { list } = this.state
        const house = list[index]
            // 判断 house 是否存在
            // 如果不存在，就渲染 loading 元素占位
        if (!house) {
            return (
            <div key={key} style={style}>
                <p className={styles.loading} />
            </div>
            )
        }
        return (
            <HouseItem key={key} style={style} src={BASE_URL + house.houseImg} title={house.title} desc={house.desc} tags={house.tags} price={house.price} onClick={()=>this.props.to(`/detail/${house.houseCode}`)}></HouseItem>
        )
    }

    //内置的isRowLoaded判断是否加载完成 → loadMoreRows一次加载的最小行数
    //InfiniteLoader组件内功能函数
    // 判断列表中的每一行是否加载完成
    isRowLoaded = ({ index }) => {
        return !!this.state.list[index]
    }
    //InfiniteLoader组件功能函数
    // 用来获取更多房屋列表数据
    // 注意：该方法的返回值是一个 Promise 对象，并且，这个对象应该在数据加载完成时，来调用 resolve 让Promise对象的状态变为已完成。
    //默认一次加载十条startIndex, stopIndex范围为10
    loadMoreRows = ({ startIndex, stopIndex }) => {
    return new Promise(resolve => {
      API.get('/houses', {
        params: {
          cityId: value,
          ...this.filters,
          start: startIndex,
          end: stopIndex
        }
      }).then(res => {
        this.setState({
          list: [...this.state.list, ...res.data.body.list]//添加新数据在渲染的列表中（startIndex~ stopIndex ）
        })
        // 数据加载完成时，调用 resolve 即可
        resolve()
      })
    })
    }
    //房屋列表渲染
    RenderMinhouselist=()=>{
        if(this.state.count==0){
            return   <div className={styles.nohouse}>
            <img
              className={styles.img}
              src={BASE_URL + '/img/not-found.png'}
              alt="暂无数据"
            />
            <p className={styles.ptext}>{"没有您要找的房源呢(;´༎ຶД༎ຶ`) "}</p>
          </div>
        }
        // {/* 所以这里是三层高阶组件，LIST从前面两层父组件获得状态 */}
        //当用户在列表中向上或向下滚动时管理即时获取数据的组件。
        return <InfiniteLoader isRowLoaded={this.isRowLoaded} loadMoreRows={this.loadMoreRows} rowCount={this.state.count}>
        {({onRowsRendered,registerChild})=>(
                    //OnRowsRendered属性,它在用户滚动时通知加载程序
                    //
                    //{/* 使用WindowScroller的原因是需要吸顶效果，所以房屋列表信息要随着页面滚动 */}
                    //{/* windowscroller提供页面滚动isscrolling状态给list，提供滚动距离scrolltop，提供视口高度height，*/}
                    <WindowScroller>
                    {({height,isScrolling,scrollTop})=>(
                        // {/* autosizer提供宽度：视口宽度 */}
                        <AutoSizer> 
                            {({width})=>(
                                    <List
                                    onRowsRendered={onRowsRendered}//滚动时加载
                                    ref={registerChild}//ref对象，list数据加载完成，继续加载
                                    autoHeight//设置高度与windowScroller的高度，最终渲染的高度
                                    width={width}//表宽
                                    height={height}//表高
                                    rowCount={this.state.count}//行数
                                    rowHeight={125}//行高（调用行高函数）
                                    rowRenderer={this.renderhouselist}//渲染每一行内容 调用渲染函数
                                    isScrolling={isScrolling}
                                    scrollTop={scrollTop}
                                    />

                            )}
                        </AutoSizer>
                    )}
                </WindowScroller>

        )}
        </InfiniteLoader>
    }
    
    render(){
        return(
            <div className={styles.root}>
                {/* 顶部搜索导航 */}
                <Flex className={styles.header}>
                    <i className="iconfont icon-back" onClick={() =>{this.props.to(-1)}}></i>
                    <Searchnavbar cityname={this.label} newclassName={styles.searchHeader}></Searchnavbar>
                </Flex>
                {/* 3个筛选框得组件 */}
                <Sticky>
                    <Filter getfiler={this.getfilervalues}></Filter>
                </Sticky>
                {/* 房屋列表 */}
                <div className={styles.houseItems}>
                {this.RenderMinhouselist()}
                </div>
            </div>    

        )
    }
}
const citylistHook= withHook(CityList)
export default citylistHook